<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull @resize="onResize">
			<template #head>
				<cl-title-module
					title="部门报表"
					:columns="initColumns"
					:print="printParams"
					v-model="table.columns"
					@export-file="exportExcel"
				/>
				<el-row type="flex">
					<cl-filter-group v-model="search">
					
						<cl-filter label="事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								style="width: 150px"
								filterable
								@change="changeBiz"
							>
								<el-option v-if="userInfo.biz_id == 1" label="全部" :value="0" />
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>

						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								style="width: 150px"
								filterable
								clearable
								@change="refresh"
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="部门">
							<cl-cascader
								clearable
								v-model="search.dept_ids"
								:options="deptList"
								collapse-tags
								style="min-width: 230px"
								:props="{
									multiple: true,
									value: 'dept_id',
									label: 'dept_name'
								}"
								filterable
							/>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 230px"
								:clearable="false"
								@change="refresh"
							/>
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>
			<cl-table v-bind="table" id="depreportPerson">
				<cl-empty slot="empty" />
			</cl-table>
		</cl-pagefull>
	</cl-crud>
</template>

<script>
import dayjs from "dayjs";
import { exportExcel } from "@/utils/excel";
import { cloneDeep } from "cl-admin/utils";
import { delEmptyChildren } from "@/utils";

export default {
	name: "dep-report-person",
	data() {
		return {
			printParams: {
				id: "depreportPerson",
				popTitle: "部门报表"
			},
			search: {
				biz_id: 0,
				bra_id: [],
				dept_ids: [],
				date: [
					dayjs()
						.startOf("month")
						.format("YYYY-MM-DD"),
					dayjs()
						.endOf("month")
						.format("YYYY-MM-DD")
				]
			},
			deptList: [],
			table: {
				"context-menu": ["refresh"],
				columns: [],
				props: {
					maxHeight: 500,
					showSummary: true
					// summaryMethod: this.getSummaries
				}
			},
			initColumns: [
				{ label: "序号", type: "index", width: 50, fixed: true, disable: true },
				{
					label: "部门",
					prop: "dept_name",
					minWidth: 120,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "员工",
					prop: "user_name",
					minWidth: 120,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "加微数", prop: "add_wei_num", width: 120 },
				{ label: "预约数", prop: "deposit_num", width: 120 },
				{ label: "业绩", prop: "achieve_num", width: 120 }
			]
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		if (this.userInfo?.biz_id != 1) {
			this.search.biz_id = this.getCurrBiz();
		}
		const { initColumns } = this;
		this.table.columns = cloneDeep(initColumns);
		this.init();
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.ad)
				.set("dict", {
					api: {
						page: "deptreport"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh() {
			console.log(this.search.dept_ids);
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		async init(type = 0) {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
			this.initData(type);
		},
		async initData(type = 0) {
			const { biz_id } = this.search;
			// this.search.bra_id = this.brandList[0]?.value;
			this.deptList = delEmptyChildren(
				await this.$store.dispatch("common/getDept", {
					biz_id,
					parent_id: 0,
					is_store: 0,
					post: 4,
					needCascader: true
				})
			);
		},
		changeBiz() {
			this.search.bra_id = [];
			this.search.dept_ids = [];
			this.init(1);
		},
		//合计
		getSummaries({ columns, data }) {
			let hold_amount = 0,
				achievement = 0,
				order_after_amount = 0,
				hold_deposit = 0,
				deposit_amount = 0,
				connect_ok = 0,
				visit = 0;
			return columns.map((column, index) => {
				if (index === 0) {
					return "合计";
				}
				if (column.property === "user_name") {
					return "";
				}
				if (column.property === "own_achievement") {
					let result = hold_amount + achievement;
					return this.toFixed(result);
				}
				if (column.property === "order_hold_rate") {
					if (order_after_amount) {
						let result = hold_amount / order_after_amount;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				if (column.property === "deposit_rate") {
					if (deposit_amount) {
						let result = hold_deposit / deposit_amount;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				if (column.property === "efficiency") {
					if (visit) {
						let result = connect_ok / visit;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				const values = data.map(item => Number(item[column.property]));
				let sum = values.reduce((prev, curr) => {
					const value = Number(curr);
					if (!isNaN(value)) {
						return prev + curr;
					}
					return prev;
				}, 0);
				if (column.property === "hold_amount") {
					hold_amount = sum;
				}
				if (column.property === "achievement") {
					achievement = sum;
				}
				if (column.property === "order_after_amount") {
					order_after_amount = sum;
				}
				if (column.property === "hold_deposit") {
					hold_deposit = sum;
				}
				if (column.property === "deposit_amount") {
					deposit_amount = sum;
				}
				if (column.property === "connect_ok") {
					connect_ok = sum;
				}
				if (column.property === "visit") {
					visit = sum;
				}
				return this.toFixed(sum);
			});
		},
		exportExcel() {
			exportExcel("#depreportPerson");
		}
	}
};
</script>

<style></style>
